<template>
  <div class="Edit_div">
    <el-row>
      <el-col :span="24">
        <el-button icon="el-icon-back" @click="go" size="mini" type="info">返回
        </el-button>
      </el-col>
    </el-row>
    <el-form ref="ResumeFormRef" :rules="rules" :model="ResumeForm" label-width="80px">
      <el-row>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="类型" prop="TypeID">
              <el-select class="Edit_select" v-model="ResumeForm.TypeID">
                <el-option label="一般" :value="0"></el-option>
                <el-option label="推荐" :value="1"></el-option>
                <el-option label="黑名单" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="状态" prop="StatusID">
              <el-select class="Edit_select" v-model="ResumeForm.StatusID">
                <el-option label="待上岗" :value="0"></el-option>
                <el-option label="工作中" :value="1"></el-option>
                <el-option label="已离职" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="姓名" prop="pk_Resume">
              <input type="hidden" v-model="ResumeForm.pk_Resume" />
              <el-input v-model="ResumeForm.FullName"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="性别" prop="Sex">
              <el-select class="Edit_select" v-model="ResumeForm.Sex">
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="年龄" prop="Age">
              <el-input v-model.number="ResumeForm.Age"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="户籍" prop="Province">
              <el-input v-model="ResumeForm.Province"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="7">

          <div>
            <el-form-item label="出生日期">
              <el-date-picker class="Edit_date" prop="Birthday" v-model="ResumeForm.Birthday" type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="学历" prop="Education">
              <el-input v-model="ResumeForm.Education"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="语言" prop="Language">
              <el-input v-model="ResumeForm.Language"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="工作年份" prop="Years">
              <el-input v-model.number="ResumeForm.Years"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="14">
          <div>
            <el-form-item label="档期">
              <el-date-picker class="Edit_date" prop="StartDate" v-model="ResumeForm.StartDate" type="date"
                placeholder="选择日期">
              </el-date-picker>~
              <el-date-picker class="Edit_date" prop="EndDate" v-model="ResumeForm.EndDate" type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="20">
          <el-form-item label="工作经历" prop="Remark">
            <el-input type="textarea" v-model="ResumeForm.Remark"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="20">
          <el-form-item label="客户评价" prop="City">
            <el-input type="textarea" v-model="ResumeForm.City"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2"><br>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="微信号" prop="Wechat">
              <el-input v-model="ResumeForm.Wechat"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="身份证号" prop="License">
              <el-input v-model="ResumeForm.License"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="手机号">
              <el-input v-model="ResumeForm.TEL"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="应急电话">
              <el-input v-model="ResumeForm.Mobile"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-form-item label="家庭住址" prop="Address">
              <el-input v-model="ResumeForm.Address"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="7">
          <div>
            <el-form-item label="家庭情况" prpo="Wangwang">
              <el-input v-model="ResumeForm.Wangwang"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="20">
          <el-form-item label="备注信息" prop="Description">
            <el-input v-model="ResumeForm.Description" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-row>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
        <el-col :span="20">
          <el-form-item label="上传头像">
            <el-upload style="border:1px solid #c0c4cc;width:180px;height:180px;overflow:hidden;"
              class="avatar-uploader" action="/HrApi/Update/Upload" :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <br>
        </el-col>
      </el-row>
      <el-col :span="2">
        <br>
      </el-col>
      </el-row>
      <el-form-item>
        <el-button icon="el-icon-check" @click="zx('ResumeFormRef')" size="small" type="primary">保存简历</el-button>
        <el-button icon="el-icon-document" @click="dialogResumeFormVisible = true" size="small">查看简历</el-button>
        <!--查看简历-->
        <el-dialog title="简历" style="height: 100%;" :visible.sync="dialogResumeFormVisible">
          <el-row>
            <el-col :span="1">
              <br>
            </el-col>
            <el-col :span="6">
              <img style="width:100%;height:180px" :src="imageUrl">
            </el-col>
            <el-col :span="2">
              <br>
            </el-col>
            <el-col :span="14">
              <span style="font-size: 27px;">姓名：{{this.ResumeForm.FullName}}</span>
              <br>
              <span style="font-size: 17px;" class="el-icon-phone-outline">电话：{{this.ResumeForm.TEL}}</span>
              <br>
              <span style="font-size: 17px;" class="el-icon-message">邮箱：{{this.ResumeForm.Email}}</span>
              <br>
              <span style="font-size: 17px;" class="el-icon-location-outline">住址：{{this.ResumeForm.Address}}</span>
            </el-col>
            <el-col :span="1">
              <br>
            </el-col>
          </el-row>
          <hr style="background-color: #409eff;border-color: #409eff;height: 4px;">
          <el-row class="Resume_Logo">
            <el-col style="background-color: #409eff;border-color: #409eff;height: 30px;color:white" :span="4">
              <span>基本信息</span>
            </el-col>
            <el-col style="background-color: #c2c3c9;border-color: #c2c3c9;height: 30px;" :span="20">
              <br>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="1">
              <br>
            </el-col>
            <el-col :span="7">
              年龄：{{this.ResumeForm.Age}}
            </el-col>
            <el-col :span="7">
              性别：{{this.ResumeForm.Sex}}
            </el-col>
            <el-col :span="8">
              出生日期：{{this.ResumeForm.Birthday}}
            </el-col>
            <el-col :span="1">
              <br>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="1">
              <br>
            </el-col>
            <el-col :span="7">
              学历：{{this.ResumeForm.Education}}
            </el-col>
            <el-col :span="7">
              户籍：{{this.ResumeForm.Province}}
            </el-col>
            <el-col :span="8">
              工作年份:{{this.ResumeForm.Years}}
            </el-col>
            <el-col :span="1">
              <br>
            </el-col>
          </el-row>
          <el-row class="Resume_Logo">
            <el-col style="background-color: #409eff;border-color: #409eff;height: 30px;color:white" :span="4">
              <span>工作经历</span>
            </el-col>
            <el-col style="background-color: #c2c3c9;border-color: #c2c3c9;height: 30px;" :span="20">
              <br>
            </el-col>
          </el-row>
          <el-row style="height:50px">
            <el-col :span="1">
              <br>
            </el-col>
            <el-col :span="22">
              {{this.ResumeForm.Remark}}
            </el-col>
            <el-col :span="1">
              <br>
            </el-col>
          </el-row>
          <el-row class="Resume_Logo">
            <el-col style="background-color: #409eff;border-color: #409eff;height: 30px;color:white" :span="4">
              <span>客户评价</span>
            </el-col>
            <el-col style="background-color: #c2c3c9;border-color: #c2c3c9;height: 30px;" :span="20">
              <br>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="1">
              <br>
            </el-col>
            <el-col :span="22">
              {{this.ResumeForm.City}}
            </el-col>
            <el-col :span="1">
              <br>
            </el-col>
          </el-row>
        </el-dialog>

      </el-form-item>

    </el-form>

  </div>

</template>
 

<style>
.el-upload-list--picture-card .el-upload-list__item {
  border-radius: 50% !important;
}
</style>
<style lang="scss" scoped >
.Edit_div input {
  width: 250px;
}

.Edit_select {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.Edit_date {
  width: 250px;
}

.aatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;

  border-radius: 6px;

  cursor: pointer;

  position: relative;

  overflow: hidden;
}

.aatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.aatar-uploader-icon {
  font-size: 28px;

  color: #8c939d;

  width: 178px;

  height: 178px;

  line-height: 178px;

  text-align: center;
}

.aatar {
  width: 178px;

  height: 178px;
  display: block;
}
.Resume_Logo {
  margin-top: 5px;
  text-align: center;
  line-height: 30px;
}
</style>
<script>
export default {
  data () {
    return {
      ResumeForm: {
        // TypeID: '',//类型   非空
        // StatusID: '',//状态  非空
        // FullName: '',// 姓名 非空 不能输入数字
        // Sex: '',//  非空
        // Age: '',// 非空 只能输入数字
        // Province: '', //户籍 非空 
        // Birthday: '',// 出生日期
        // Education: '',//学历 
        // Language: '',//语言
        // Years: '', //工作年限 非空  只能输数字
        // Remark: '',//工作经历   
        // Email: '空',//邮箱地址   非空
        // Wechat: '',//微信   非空
        // Comments: '',//备注   
        // License: '',//身份证号 非空
        // Address: '',//家庭住址  非空
        // Contact: '',//联系  非空
        // TEL: '',//电话  非空
        // Mobile: null,//移动  非空
        // Description: '',//备注  
        // Wangwang: '',//家庭情况
        // StartDate: '2020/2/2',
        // EndDate: '2020/2/3',
        // city: '',//工作经历
        fk_User: this.$store.state.UserInfo.pk_User,
        //ImagePath: ""

      },
      rules: {
        TypeID: [
          { required: true, message: '类型不能为空', trigger: 'blur' }
        ],
        StatusID: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ],
        Sex: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        Birthday: [
          { required: true, message: '出生日期不能为空', trigger: 'blur' }
        ],
        FullName: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        License: [
          { required: true, message: '身份证号不能为空', trigger: 'blur' }
        ],
        Age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          { type: 'number', message: '年龄只能输入整数', trigger: 'blur' }
        ],
        Province: [
          { required: true, message: '户籍不能为空', trigger: 'blur' }
        ],
        Years: [
          { required: true, message: '工作年限不能为空', trigger: 'blur' },
          { type: 'number', message: '工作年限只能输入整数', trigger: 'blur' }
        ],
        Email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' }
        ],
        Wechat: [
          { required: true, message: '微信不能为空', trigger: 'blur' }
        ],
        Address: [
          { required: true, message: '家庭住址', trigger: 'blur' }
        ],
        Contact: [
          { required: true, message: '紧急联系人不能为空', trigger: 'blur' }
        ],
        TEL: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { type: 'number', min: "6", max: '11', message: '手机号格式错误', trigger: 'blur' }
        ],
        Mobile: [
          { required: true, message: '应急电话不能为空', trigger: 'blur' },
          { type: 'number', message: '应急电话格式错误', trigger: 'blur' }
        ],
      },
      checkList: ['选中且禁用', '复选框 A'],
      abc: 2,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      dialogResumeFormVisible: false,
      type: 'Add',
      imageUrl: '',
      ImgDt: ''
    }
  },
  methods: {
    //上传头像
    handleAvatarSuccess (res, file) {
      if (!res.code) {
        this.$message.success("上传成功")
        this.imageUrl = URL.createObjectURL(file.raw);

        this.ResumeForm.ImagePath = res.data

      }
    },
    onSubmit () {
    },
    go () {
      this.$router.push('/Resume/List')
    },
    handleRemove (file) {
      console.log(file);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload (file) {
      console.log(file);
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    }, zx (ResumeFormRef) {
      this.$refs[ResumeFormRef].validate((valid) => {
        if (!valid) {
          return false;
        }
        console.log(this.ResumeForm)
        this.$axios({
          url: '/HrApi/Resume/UpdateResume',
          method: "POST",
          data: this.$Qs.stringify({
            Resume: JSON.stringify(this.ResumeForm),
            type: this.type,
            pk_User: this.$store.state.UserInfo.pk_User
          })
        }).then(res => {
          if (!res.data.code) {
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
          } else {
            this.$message(res.data.msg)

          }
        })

      })
    },
  }, mounted () {
    if (Object.keys(this.$route.query).length) {
      this.type = "Update";
      this.$axios({
        url: '/HrApi/Resume/ResumeListInfo',
        method: 'GET',
        params: {
          ResumeID: this.$route.query["pk_Resume"]
        }
      }).then(res => {
        if (!res.data.code) {
          console.log(res.data.data)
          this.ResumeForm = res.data.data
          this.imageUrl = 'data:image/jpeg;base64,' + res.data.ImgDt;
        } else {
          this.$message(res.data.msg)

        }
      })
    }
  }
}
</script>